<template>
  <ListLayout class="zcgl-fjgl-list-wrap">
    <ul class="type-wrap clearFloat" slot="top-left">
      <li
        v-for="(item, index) in typeList"
        :key="index"
        :class="{'active': queryFormData.type === item.code}"
        @click="handleSwitchQueryCondition('type', item.code)"
      >{{item.label}}</li>
    </ul>
    <div slot="table" class="zcgl-fjgl-list">
      <info v-if="queryFormData.type=='zcjbxx'"></info>
      <glht v-if="queryFormData.type=='glht'"></glht>
      <tzjl v-if="queryFormData.type=='tzjl'"></tzjl>
    </div>
  </ListLayout>
</template>

<script>
export default JBoot({
  props: {},
  components: {
    info: require("./components/info").default,
    glht: require("./components/glht").default,
    tzjl: require("./components/tzjl").default
  },
  data() {
    return {
      moduleName: "ftgl",
      queryFormData: {
        type: "zcjbxx"
      },
      typeList: [
        { label: "资产基本信息", code: "zcjbxx" },
        { label: "关联合同", code: "glht" },
        { label: "调整记录", code: "tzjl" }
      ],
      projectList: []
    };
  },

  computed: {},

  methods: {
    handleSwitchQueryCondition(field, value) {
      console.log(field, value);
      this.$set(this.queryFormData, field, value);

      !!this.queryFormData.projectId && this.queryHandler();
    }
  },

  watch: {}
})
  .list()
  .build();
</script>

<style lang="scss">
.zcgl-fjgl-list-wrap {
  & .title-container {
    padding: 5px 10px 0 !important;
    & > .top-left {
      float: left;
      & > .type-wrap {
        height: 35px;
        line-height: 25px;
        & li {
          float: left;
          margin: 0 10px;
          cursor: pointer;
          font-size: 14px;
          height: 100%;
          padding: 0 5px;
          border-bottom: 2px transparent;
          transition: color, border-bottom-color 0.3s;
          user-select: none;
          &.active {
            border-bottom: 2px solid #2196f3;
            color: #2196f3;
          }
        }
      }
    }
  }
  .table-wrap > .table {
    .zcgl-fjgl-list {
      height: 100%;
    }
  }
}
</style>
